<template>
  <div>
    <el-dialog title="项目介绍" :visible.sync="dialogVisible" width="50%">
        <div class="btns">
            <el-button type="primary" @click="changePage(1)">上一页</el-button>
            <el-button type="primary" @click="changePage(2)">下一页</el-button>
        </div>
      <!-- pdf 在public目录下 -->
      <!-- 
        page：显示的页码
        pageCount：总页数
        currentPage：当前页
       -->
       {{ page }} / {{ 2 }}
      <pdf src="./介绍.pdf" :page="page"/>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pdf from "vue-pdf";
export default {
  components: {
    pdf
  },
  data() {
    return {
      dialogVisible: false,
      pageCount: 1,
      currentPage: 1,
      page: 1
    };
  },
  methods: {
    changePage(num) {
        this.page = num;
    }
  },
};
</script>

<style lang="less" scoped>
.btns {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid lightgray;
    margin-bottom: 10px;
    button {
        margin-right: 10px;
    }
}
</style>